.ui-color {
  &-content {
    padding: 5px 11px;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    position: absolute;
  }
  &-panel {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    &-left {
      width: 280px;
      height: 180px;
      margin-right: 10px;
      position: relative;
      background-color: rgb(0, 125, 255);
      &-cursor {
        position: absolute;
        z-index: 2;
        top: 40px;
        right: 40px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px #0000004d, 0 0 1px 2px #0006;
        transform: translate(2px, -2px);
      }
      &::before {
        width: 100%;
        height: 100%;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
      }
      &::after {
        width: 100%;
        height: 100%;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
      }
    }
  }
  &-silder {
    position: relative;
    box-sizing: border-box;
    width: 12px;
    height: 180px;
    background-image: linear-gradient(
      to bottom,
      #ff0000 0%,
      #ff9a00 10%,
      #ccff00 20%,
      #33ff00 30%,
      #00ff67 40%,
      #00ffff 50%,
      #0066ff 60%,
      #3300ff 70%,
      #cc00ff 80%,
      #ff0099 90%,
      #ff0000 100%
    );
    padding: 0 2px;
    float: right;
    &-thumb {
      position: absolute;
      box-sizing: border-box;
      left: 0;
      top: 0;
      width: 100%;
      height: 4px;
      border-radius: 1px;
      background: #fff;
      border: 1px solid #ebeef5;
      box-shadow: 0 0 2px #0009;
      z-index: 1;
      transform: translate(0, -2px);
    }
  }
  &-pellucidity {
    position: relative;
    box-sizing: border-box;
    width: 280px;
    height: 12px;
    margin-bottom: 10px;
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 0, 6px -6px, 0 6px;
    &-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: linear-gradient(to right, rgba(12, 244, 115, 0) 0%, rgb(12, 244, 115) 100%);
    }
    &-thumb {
      position: absolute;
      box-sizing: border-box;
      right: 0;
      top: 0;
      width: 4px;
      height: 100%;
      border-radius: 1px;
      background: #fff;
      border: 1px solid var(--el-border-color-lighter);
      box-shadow: 0 0 2px #0009;
      z-index: 1;
      transform: translate(2px, 0);
    }
  }
  &-footer {
    display: flex;
    justify-content: space-between;
    input {
      color: #606266;
      height: 22px;
      padding: 0 5px;
      outline: none;
      border-radius: 3px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      font-size: 12px;
      &::placeholder {
        padding: 0 5px;
      }
    }
    &-right {
      display: flex;
    }
    &-confirm,
    &-clear {
      cursor: pointer;
      padding: 0 5px;
      color: #606266;
      border-radius: 3px;
      background-color: #f5f7fa;
      &:hover {
        background-color: @primary-2;
      }
    }
    &-board {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
      &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      &::before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
        background-size: 12px 12px;
        background-position: 0 0, 6px 0, 6px -6px, 0 6px;
      }
    }
    &-confirm {
      margin-left: 10px;
      color: #fff;
      background-color: @primary-color;
      &:hover {
        background-color: @primary-color-hover;
      }
    }
  }
}
